<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>截图配置面板</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      width: 350px;
      padding: 15px;
      margin: 0;
      background-color: #f5f5f5;
    }
    .config-container {
      background-color: white;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    h3 {
      margin-top: 0;
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    .columns-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin: 15px 0;
    }
    .column-item {
      display: flex;
      align-items: center;
    }
    .column-item input {
      margin-right: 8px;
    }
    .action-buttons {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }
    button {
      flex: 1;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      transition: background-color 0.2s;
    }
    .save-btn {
      background-color: #4CAF50;
      color: white;
    }
    .save-btn:hover {
      background-color: #45a049;
    }
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #333;
      color: white;
      padding: 12px 24px;
      border-radius: 4px;
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 1000;
    }
    .toast.show {
      opacity: 1;
    }
    .toast.success {
      background-color: #4CAF50;
    }
    .toast.error {
      background-color: #f44336;
    }
  </style>
</head>
<body>
<div class="config-container">
  <h3>截图列配置</h3>
  <div class="columns-grid" id="columnsContainer">
    <!-- 列选项将通过JavaScript动态生成 -->
  </div>
  <div class="action-buttons">
    <button class="save-btn" id="saveConfig">保存配置</button>
  </div>
</div>
<div class="toast" id="configToast"></div>

<script src="popup.js"></script>
</body>
</html>
